.mmv {
	&-main {
		&-page {
			padding-top: 30px;
		}
	}
	&-layout {
		width: 1000px;
		margin: 0 auto;
		padding-left: 100px;
		padding-right: 100px;
		box-sizing: content-box;
		&::after {
			content: '';
			display: block;
			visibility: hidden;
			height: 0;
			clear: both;
			font-size: 0;
		}
		&__main {
			float: left;
			width: 700px;
		}
		&__sub {
			float: right;
			width: 280px;
		}
	}
	&-container {
		background-color: #fff;
		border-radius: 4px;
		&__footer {
			height: 70px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #ebebeb;
		}
	}
	&-button {
		display: inline-block;
		cursor: pointer;
		flex-shrink: 0;
		&__button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			outline: none;
			width: 100%;
			height: 100%;
			background-color: transparent;
			border: none;
			border-radius: 0;
			font-weight: inherit;
			line-height: inherit;
		}
		&-text &__button {
			color: #999;
		}
	}
	&-loadmore {
		&__nomore,
		&__btn .mmv-button__button {
			color: #ccc;
			font-size: 16px;
		}
		&__btn {
			.mmv-button__button {
				color: #4cc3ff;
				padding: 10px 0;
			}
		}
	}

	&-account {
		&-action {
			&-sheet {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				color: #333;
				font-size: 14px;
				z-index: 999;
				overflow: auto;
				&__content {
					position: absolute;
					padding: 0 30px 50px;
					width: 400px;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%) scale(1);
					opacity: 1;
					background-color: #fff;
					border-radius: 4px;
				}
				&__close {
					position: absolute;
					width: 30px;
					height: 30px;
					top: 0;
					right: -40px;
					background-color: #000;
					line-height: 30px;
					text-align: center;
					font-size: 10px;
					border-radius: 100%;
					color: #fff;
					cursor: pointer;
					font-weight: bold;
				}
			}
		}
		&-frame {
		}
		&-tabs {
			width: 100%;
			font-size: 1.4em;
			border-bottom: 1px solid #adb5bf;
			position: relative;
			font-size: 0;
			.tab-item {
				text-align: center;
				padding: 1em;
				line-height: 2em;
				cursor: pointer;
				display: inline-block;
				-webkit-tap-highlight-color: transparent;
				&.active {
					font-weight: bold;
					color: #00c3ff;
				}
			}
			&.tabs-flex {
				display: flex;
				.tab-item {
					flex: 1;
				}
			}
			.tab-active-line {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 0.22em;
				background-color: #00c3ff;
				&.transition {
					transition: all 300ms ease;
				}
			}
		}
		&-title {
			display: inline-block;
			font-size: 0;
			line-height: 20px;
			vertical-align: top;
			> * {
				font-size: 14px;
				display: inline-block;
				vertical-align: middle;
			}
			&__name {
				color: #666;
				max-width: 180px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&__level {
				margin-left: 6px;
				height: 16px;
			}
		}
	}
	&-login {
		a {
			text-decoration: none;
			cursor: pointer;
			color: #00c3ff;
		}
		.register-bar {
			color: #00c3ff;
			font-size: 1em;
			font-weight: 200;
			.to-register {
				float: right;
				font-weight: normal;
			}
		}
		.login-tip {
			margin-top: 10px;
			font-size: 0.9em;
		}
		.login-btn {
			margin-top: 3em;
			margin-bottom: 1em;
		}
		&-button {
			text-align: center;
			display: block;
			button {
				display: inline-block;
				border: 1px solid #00c3ff;
				width: 100%;
				line-height: 3.6em;
				padding: 0 3em;
				background-color: #00c3ff;
				border-radius: 0.2em;
				color: #fff;
				font-size: 1.2em;
				outline: none;
				&:hover {
					border-color: #74d9f1;
				}
			}
		}
		&-form-input {
			padding-top: 1.5em;
			font-size: 1.2em;
			position: relative;
			line-height: 1.5em;
			.error-text {
				color: #f73131;
				font-size: 1em;
				line-height: 1em;
				padding: 0.7em 0 0.3em;
			}
			.input-container {
				display: flex;
				border-bottom: 1px solid #adb5bf;
				position: relative;
				input {
					position: relative;
					flex: 1;
					z-index: 2;
					border: none;
					min-width: 0;
					width: 100%;
					color: #4c4c4c;
					font-weight: lighter;
					padding: 0.4em 0;
					background-color: transparent;
				}
				.input-inner-btn {
					width: 8em;
					text-align: center;
					padding: 0.6em 0;
					font-size: 1em;
					color: #00c3ff;
					cursor: pointer;
					line-height: 1.1em;
					&::before {
						content: '';
						border-left: 1px solid #adb5bf;
						float: left;
						height: 100%;
					}
					&.disabled {
						color: #ccc;
						cursor: not-allowed;
					}
				}
			}
			&.input-error {
				.input-container {
					border-color: #f73131;
					input {
						color: #f73131;
					}
				}
			}
		}
		&-frame {
			&.mmv-login {
				.register-bar {
					padding-bottom: 20px;
					a {
						color: #999;
						font-weight: normal;
						font-size: 14px;
					}
				}
				.login-tip {
					line-height: 1.5;
				}
				.login-btn {
					margin: 20px 0;
					line-height: 40px;
					font-size: 16px;
					cursor: pointer;
					background-color: #4cc3ff;
					color: #fff;
					border-radius: 4px;
				}
				.mmv-login-form-input {
					margin-bottom: 15px;
					font-size: 14px;
					padding-top: 0;
				}
				.mmv-account-tabs {
					display: block;
					border-bottom: 1px solid #f0f0f0;
					margin-bottom: 50px;
					.tab-item {
						padding: 0;
						margin-right: 30px;
						color: #999;
						display: inline-block;
						vertical-align: top;
						position: relative;
						line-height: 70px;
						font-size: 16px;
						&.active {
							color: #333;
							font-weight: normal;
							&::after {
								content: ' ';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 3px;
								background-color: #ffe14c;
							}
						}
					}
					.tab-active-line {
						display: none;
					}
				}
				.input-container {
					height: 42px;
					border: 1px solid #ebebeb;
					border-radius: 4px;
					input {
						padding: 0 20px;
					}
					.input-inner-btn {
						padding: 10px 0;
						line-height: 20px;
						&::before {
							border-left: 1px solid #ebebeb;
						}
					}
				}
				.input-error {
					.input-container {
						border-color: #f73131;
						input {
							color: #f73131;
						}
					}
				}
				.focus {
					border-color: #4cc3ff;
				}
			}
			.login-tab,
			.input-item {
				margin-bottom: 1em;
			}
		}
		.login-tab,
		.input-item {
			margin-bottom: 1em;
		}
	}
	&-avatar {
		display: inline-block;
		position: relative;
		&__img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1px solid #ebebeb;
			vertical-align: top;
		}
		&__pendant {
			position: absolute;
			display: block;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: calc(128.5% - 2px);
			height: calc(128.5% - 2px);
			pointer-events: none;
			z-index: 2;
		}
		&__auth {
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 5;
		}
		&__md {
			width: 44px;
			height: 44px;
			.mmv-avatar__auth {
				font-size: 14px;
				img {
					height: 14px;
				}
			}
		}
		&__xs {
			width: 24px;
			height: 24px;
			.mmv-avatar__auth {
				font-size: 8px;
				img {
					height: 8px;
				}
			}
		}
	}
	&-icon {
		font-size: inherit;
	}
	&-img {
		&-icon {
			height: 1em;
			fill: currentcolor;
			overflow: hidden;
		}
	}
	&-topic {
		&-label {
			&-selector {
				font-size: 12px;
				display: flex;
				flex-wrap: wrap;
				&__item {
					height: 24px;
					line-height: 24px;
					display: inline-flex;
					align-items: center;
					color: #666;
					border-radius: 12px;
					margin-right: 10px;
					background-color: #f5f5f5;
					position: relative;
					cursor: pointer;
				}
				&__link {
					display: inline-block;
					color: inherit;
					padding: 0 12px;
					&:hover {
						color: #00b2ff;
					}
				}
			}
		}
		&-list {
			padding-bottom: 10px;
		}
		&-card {
			display: flex;
			align-items: center;
			& + & {
				margin-top: 20px;
			}
			&__link {
				color: #333;
				display: flex;
				align-items: center;
			}
			&__cover {
				display: inline-block;
				flex-shrink: 0;
				position: relative;
				overflow: hidden;
				border-radius: 8px;
				border: 1px solid #ebebeb;
			}
			&__img {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
			&__info {
				display: inline-block;
				flex-grow: 1;
				overflow: hidden;
			}
			&__name {
				position: relative;
				line-height: 20px;
			}
			&__desc {
				color: #999;
				font-size: 12px;
				line-height: 18px;
			}
			&__info &__link,
			&__name,
			&__desc {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&-sm {
				.mmv-topic-card__cover {
					width: 50px;
					height: 50px;
				}
				.mmv-topic-card__info {
					margin-left: 10px;
				}
			}
		}
	}
	&-op {
		&-list {
			padding-bottom: 10px;
			&-banner {
				width: 240px;
				height: 136px;
				position: relative;
				margin-bottom: 20px;
				border-radius: 4px;
				overflow: hidden;
				&__img {
					width: 100%;
					height: 100%;
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: cover;
					object-fit: cover;
				}
				&__title {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					padding: 0 10px;
					height: 32px;
					line-height: 32px;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.5);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			&__card {
			}
		}
		&-card {
			& + & {
				margin-top: 15px;
			}
			&__link {
				display: flex;
				align-items: center;
				color: #333;
			}
			&__label {
				display: inline-block;
				width: 32px;
				height: 16px;
				background-color: #c3ccd9;
				color: #fff;
				font-size: 12px;
				border-radius: 3px;
				text-align: center;
				line-height: 16px;
				-ms-flex-negative: 0;
				flex-shrink: 0;
			}
			&__title {
				margin-left: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	&-home {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		&__header {
			display: flex;
		}
		&__banner {
			width: 100%;
			height: 234px;
			margin-bottom: 50px;
		}
		&__post {
			padding: 0 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			& + & {
				margin-top: 20px;
			}
			.mmv-button {
				width: 160px;
				height: 40px;
				span {
					margin: 0 20px 0 10px;
					font-size: 16px;
				}
				.mmv-icon {
					font-weight: 300;
				}
				.mmv-icon.icon-fabutiezi,
				.mmv-icon.icon-image2 {
					font-size: 20px;
				}
				.mmv-icon.icon-xiaojiantou {
					font-size: 12px;
				}
			}
			.mmv-button__button {
				align-items: center;
				justify-content: center;
				color: #663c00;
				background-color: #ffe14c;
				border-radius: 4px;
				transition: 0.2s background-color;
				font-weight: 600;
				&:hover {
					background-color: #ffe733;
				}
			}
			&-wrp {
				display: flex;
				flex-direction: column;
				margin-bottom: 50px;
				padding: 0 10px;
				background-color: #fff;
				border-radius: 4px;
				width: 280px;
				height: 234px;
			}
			&-header {
				height: 50px;
				border-bottom: 1px dashed #ebebeb;
				text-align: center;
				line-height: 50px;
				font-size: 16px;
				font-weight: 600;
			}
			&-block {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
			}
			&-desc {
				font-size: 12px;
				color: #999;
				margin-top: 10px;
				word-break: break-all;
				line-height: 1;
			}
		}
	}
	&-sem {
		&-section {
			&.mmv-side-section {
				padding: 20px 14px;
				.mmv-side-section__body {
					padding: 0;
				}
			}
		}
	}
	&-side {
		&-section {
			background-color: #fff;
			border-radius: 4px;
			& + & {
				margin-top: 20px;
			}
			&__link,
			&__btn {
				color: #999;
				a {
					color: #999;
				}
			}
			&__header {
				display: flex;
				height: 50px;
				border-bottom: 1px solid #ebebeb;
				padding: 0 20px;
				align-items: center;
			}
			&__title {
				flex-grow: 1;
				font-size: 16px;
				font-weight: 600;
			}
			&__body {
				position: relative;
				padding: 20px;
			}
		}
	}
	&-banner {
		width: 700px;
		margin-bottom: 50px;
		&__container {
			position: relative;
			width: 700px;
			height: 254px;
			overflow: hidden;
		}
		&__slide {
			position: absolute;
			overflow: hidden;
			width: 366px;
			height: 170px;
			z-index: 1;
			border-radius: 8px;
			top: 40px;
			transition: all 300ms linear;
			background-color: #ccc;
			box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
			cursor: pointer;
			user-select: none;
			img {
				width: 100%;
				height: 100%;
			}
			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				background-color: #000;
				opacity: 0.5;
				transition: opacity 300ms linear;
			}
		}
		&__prev {
			left: 20px;
			&1 {
				width: 427px;
				height: 198px;
				left: 0;
				top: 20px;
				z-index: 30;
			}
			&2 {
				left: -100px;
				z-index: 10;
			}
		}
		&__next {
			right: 20px;
			&1 {
				width: 427px;
				height: 198px;
				left: 273px;
				top: 20px;
				z-index: 30;
			}
			&2 {
				left: 434px;
				z-index: 10;
			}
		}
		&__prev,
		&__next {
			position: absolute;
			top: 50%;
			margin-top: -36px;
			width: 50px;
			height: 50px;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			z-index: 55;
			cursor: pointer;
			color: #fff;
			font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			&:hover {
				background-color: #4cc3ff;
			}
		}
		&__active {
			width: 496px;
			height: 234px;
			left: 102px;
			top: 0;
			z-index: 50;
			&::after {
				opacity: 0;
			}
		}
		&__pagination {
			position: absolute;
			bottom: 0 !important;
			text-align: center;
			height: 2px;
			width: 100%;
		}
		&__bullet {
			background-color: #dfe1e6;
			width: 20px;
			height: 2px;
			vertical-align: top;
			margin: 0 5px !important;
			cursor: pointer;
			display: inline-block;
			&active {
				background-color: #4cc3ff;
			}
		}
	}
	&-user {
		&-card {
			display: flex;
			align-items: center;
			&__info {
				display: inline-block;
				margin-left: 10px;
				flex-grow: 1;
				overflow: hidden;
			}
			&__link {
				color: #666;
				display: inline-flex;
				align-items: center;
			}
			&__avatar {
				flex-shrink: 0;
			}
			&__follow {
				flex-shrink: 0;
			}
		}
	}
	&-ad {
		position: relative;
		overflow: hidden;
		&-container {
			overflow: hidden;
			height: 160px;
			border-radius: 4px;
		}
		a {
			display: block;
		}
		&__banner {
			height: 160px;
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	&-article {
		&-type {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			&__label {
				height: 18px;
				border-radius: 2px;
				text-align: center;
				line-height: 18px;
				font-weight: 600;
				padding: 0 4px;
				margin-right: 6px;
				flex-shrink: 0;
			}
			&__label&__official {
				background-color: #4cc3ff;
				color: #fff;
			}
		}
		&-card {
			padding: 24px 30px;
			// heaeder - start
			&__header {
				display: flex;
				align-items: center;
				margin-bottom: 15px;
				position: relative;
			}
			&__userinfo {
				flex-grow: 1;
				display: flex;
				align-items: center;
				.mmv-account-title__name {
					font-size: 12px;
				}
				.mhy-account-title__level {
					height: 12px;
				}
			}
			&__user {
				display: flex;
				align-items: center;
			}
			&__avatar {
				flex-shrink: 0;
			}
			&__info {
				color: #ccc;
				margin-left: 10px;
				font-size: 12px;
			}
			// header - end
			&__link {
				display: block;
			}
			&__title {
				display: flex;
				align-items: center;
				position: relative;
				padding-right: 100px;
			}
			&__h3 {
				font-size: 16px;
				line-height: 20px;
				font-weight: 600;
				color: #333;
			}
			&__content {
				line-height: 18px;
				margin-top: 8px;
				color: #999;
			}
			&__h3,
			&__content {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&__preview {
				margin-top: 10px;
				overflow: hidden;
				display: inline-flex;
				vertical-align: top;
				position: relative;
			}
			&__img {
				display: inline-block;
				width: 120px;
				height: 120px;
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: 6px;
				position: relative;
				cursor: pointer;
				& + & {
					margin-left: 5px;
				}
			}
			&__mark {
				position: absolute;
				top: 5px;
				left: 5px;
				line-height: 20px;
			}
			&__imgnum {
				position: absolute;
				right: 5px;
				bottom: 5px;
				display: flex;
				align-items: center;
			}
			&__mark,
			&__imgnum {
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 2px;
				font-size: 12px;
				color: #fff;
				height: 20px;
				padding: 0 4px;
			}
			&__footer {
				margin-top: 7px;
				display: flex;
			}
			&__topics {
				display: flex;
				flex-wrap: wrap;
				.mmv-topic-label-selector__item {
					margin-top: 5px;
				}
			}
			&__data {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				height: 24px;
				flex-grow: 1;
				justify-content: flex-end;
				margin-top: 5px;
				&-item {
					display: flex;
					align-items: center;
					line-height: 18px;
					span {
						margin-left: 8px;
						color: #ccc;
						display: inline-block;
						width: 50px;
					}
				}
				&-item + &item {
					margin-left: 10px;
				}
			}
		} // mmv-article-card - end
		&-card + &-card {
			border-top: 1px solid #ebebeb;
		}
	} //mmv-article - end
	&-symbol-icon {
		width: 1em;
		height: 1em;
		fill: currentColor;
		overflow: hidden;
	}
	&-heart {
		&-click {
			position: relative;
			cursor: pointer;
			display: -webkit-inline-box;
			display: -ms-inline-flexbox;
			display: inline-flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
	}
	&-recommend {
		&-user {
			&-list {
				&-mini {
					padding-bottom: 10px;
					&__card {
						& + & {
							margin-top: 20px;
						}
					}
				}
			}
		}
	}
	&-authentication {
		&-mark {
			font-size: inherit;
			color: inherit;
			display: flex;
			&__icon {
				font-size: inherit;
			}
		}
	}
	&-follow {
		&-button {
			background-color: #00c3ff;
			border-radius: 13px;
			height: 26px;
			line-height: 26px;
			font-size: 14px;
			width: 70px;
			display: inline-block;
			color: #fff;
			text-align: center;
			cursor: pointer;
			flex-shrink: 0;
			transition: 0.2s background-color;
			&--follow {
				&,
				&--followed {
					background-color: #f5f5f5;
					color: #999;
				}
			}
			&:not(&--follow):not(&--follow-followed):hover {
				background-color: #00d5ff;
			}
			span {
				vertical-align: top;
				display: inline-block;
			}
		}
	}
	&-rocket {
		position: fixed;
		bottom: 200px;
		left: 50%;
		margin-left: 520px;
		&__rocket {
			opacity: 0;
			visibility: hidden;
			transition-duration: 0.2s;
			transition-property: opacity, visibility;
			border-radius: 4px;
			overflow: hidden;
			cursor: pointer;
			&--visible {
				opacity: 1;
				visibility: visible;
			}
		}
		&__icon {
			&-r {
				display: block;
				width: 102px;
				height: 102px;
				background-position: 50%;
				background-repeat: no-repeat;
				background-image: url();
				background-size: cover;
			}
		}
	}
} // mmv - end

.mmv-article-card__data-item .mmv-icon,
.mmv-article-card__data-item .mmv-symbol-icon,
.mmv-article-card__data-item .mmv-img-icon {
	color: #b2b2b2;
	font-size: 16px;
}
